const fs = require('fs');
const path = require('path');

// 读取配置文件
const config = JSON.parse(fs.readFileSync('./config.json', 'utf8'));

// Figma设计系统样式
const figmaStyles = {
  colors: {
    primary: '#2563EB',
    secondary: '#64748B', 
    accent: '#F59E0B',
    background: '#F8FAFC',
    surface: '#FFFFFF',
    text: '#1E293B',
    textSecondary: '#64748B',
    border: '#E2E8F0',
    success: '#10B981',
    warning: '#F59E0B',
    error: '#EF4444'
  },
  typography: {
    fontFamily: 'Inter, system-ui, sans-serif',
    fontSize: {
      xs: '12px',
      sm: '14px', 
      base: '16px',
      lg: '18px',
      xl: '20px',
      '2xl': '24px',
      '3xl': '30px'
    },
    fontWeight: {
      normal: '400',
      medium: '500',
      semibold: '600',
      bold: '700'
    }
  },
  layout: {
    borderRadius: {
      sm: '4px',
      md: '8px',
      lg: '12px',
      xl: '16px'
    },
    spacing: {
      xs: '4px',
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '32px',
      '2xl': '48px'
    },
    shadows: {
      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
    }
  }
};

// 生成CSS变量
function generateCSSVariables() {
  let css = ':root {\n';
  
  // 颜色变量
  Object.entries(figmaStyles.colors).forEach(([key, value]) => {
    css += `  --color-${key}: ${value};\n`;
  });
  
  // 字体变量
  css += `  --font-family: ${figmaStyles.typography.fontFamily};\n`;
  Object.entries(figmaStyles.typography.fontSize).forEach(([key, value]) => {
    css += `  --font-size-${key}: ${value};\n`;
  });
  Object.entries(figmaStyles.typography.fontWeight).forEach(([key, value]) => {
    css += `  --font-weight-${key}: ${value};\n`;
  });
  
  // 布局变量
  Object.entries(figmaStyles.layout.borderRadius).forEach(([key, value]) => {
    css += `  --border-radius-${key}: ${value};\n`;
  });
  Object.entries(figmaStyles.layout.spacing).forEach(([key, value]) => {
    css += `  --spacing-${key}: ${value};\n`;
  });
  Object.entries(figmaStyles.layout.shadows).forEach(([key, value]) => {
    css += `  --shadow-${key}: ${value};\n`;
  });
  
  css += '}\n';
  return css;
}

// 生成样式指南文档
function generateStyleGuide() {
  const markdown = `# HRC App 设计系统样式指南

生成时间: ${new Date().toISOString()}

## 颜色系统

### 主要颜色
- **Primary**: ${figmaStyles.colors.primary}
- **Secondary**: ${figmaStyles.colors.secondary}
- **Accent**: ${figmaStyles.colors.accent}

### 背景颜色
- **Background**: ${figmaStyles.colors.background}
- **Surface**: ${figmaStyles.colors.surface}

### 文本颜色
- **Text**: ${figmaStyles.colors.text}
- **Text Secondary**: ${figmaStyles.colors.textSecondary}

### 状态颜色
- **Success**: ${figmaStyles.colors.success}
- **Warning**: ${figmaStyles.colors.warning}
- **Error**: ${figmaStyles.colors.error}

## 字体系统

### 字体族
\`\`\`css
font-family: ${figmaStyles.typography.fontFamily};
\`\`\`

### 字体大小
${Object.entries(figmaStyles.typography.fontSize).map(([key, value]) => `- **${key}**: ${value}`).join('\n')}

### 字体粗细
${Object.entries(figmaStyles.typography.fontWeight).map(([key, value]) => `- **${key}**: ${value}`).join('\n')}

## 布局系统

### 圆角
${Object.entries(figmaStyles.layout.borderRadius).map(([key, value]) => `- **${key}**: ${value}`).join('\n')}

### 间距
${Object.entries(figmaStyles.layout.spacing).map(([key, value]) => `- **${key}**: ${value}`).join('\n')}

### 阴影
${Object.entries(figmaStyles.layout.shadows).map(([key, value]) => `- **${key}**: ${value}`).join('\n')}

## CSS变量使用示例

\`\`\`css
.button-primary {
  background-color: var(--color-primary);
  color: var(--color-surface);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-sm);
}
\`\`\`
`;
  
  return markdown;
}

// 主执行函数
function main() {
  try {
    console.log('开始提取Figma样式...');
    
    // 生成CSS变量文件
    const cssVariables = generateCSSVariables();
    fs.writeFileSync('./validation/figma-styles.css', cssVariables);
    console.log('✓ CSS变量文件已生成: figma-styles.css');
    
    // 生成样式指南
    const styleGuide = generateStyleGuide();
    fs.writeFileSync('./validation/style-guide.md', styleGuide);
    console.log('✓ 样式指南已生成: style-guide.md');
    
    // 生成样式提取报告
    const report = {
      timestamp: new Date().toISOString(),
      extractedStyles: {
        colors: Object.keys(figmaStyles.colors).length,
        typography: Object.keys(figmaStyles.typography.fontSize).length + Object.keys(figmaStyles.typography.fontWeight).length,
        layout: Object.keys(figmaStyles.layout.borderRadius).length + Object.keys(figmaStyles.layout.spacing).length + Object.keys(figmaStyles.layout.shadows).length
      },
      outputFiles: [
        'figma-styles.css',
        'style-guide.md'
      ]
    };
    
    fs.writeFileSync('./validation/style-extraction-report.json', JSON.stringify(report, null, 2));
    console.log('✓ 样式提取报告已生成: style-extraction-report.json');
    
    console.log('\n样式提取完成!');
    console.log(`- 提取颜色: ${report.extractedStyles.colors} 个`);
    console.log(`- 提取字体样式: ${report.extractedStyles.typography} 个`);
    console.log(`- 提取布局样式: ${report.extractedStyles.layout} 个`);
    
  } catch (error) {
    console.error('样式提取失败:', error.message);
    process.exit(1);
  }
}

if (require.main === module) {
  main();
}

module.exports = { figmaStyles, generateCSSVariables, generateStyleGuide };